<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户端用户名校验(POST方式)</title>
</head>
<body>
<h2>ajax之用户名校验</h2>
<p>
    用户名：
    <input type="text" id="username">
</p>
<p>
    手机号：
    <input type="text" id="usertel">
</p>

<script type="text/javascript">
    document.getElementById("username").onblur = function(){
        //ajax方式用户名校验
        //1、获取用户名信息
        var nm = document.getElementById('username').value;

        //对传递的符号进行编码处理
        nm = encodeURIComponent(nm);

        var info = "name="+nm;


        //2、ajax校验
        var xhr = new XMLHttpRequest();

        //ajax事件设置，以便接受返回的消息
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4){
                alert(xhr.responseText);
            }
        }

        xhr.open('post', '10ServerFor09.php');
        //POST方式传递数据是模拟form表单传递数据
        //Form表单的POST格式数据是通过xml形式传递给服务器的
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");


        xhr.send(info);
    }
</script>
</body>
</html>